<template>
	<view>
		<!-- 搜索栏 -->
		<div class="search-bar">
			<uni-search-bar @click="qq" @confirm="search" @input="input"></uni-search-bar>
			<view>
				<view class="line"></view>
				<view class="flex-container">
					<text class="title">历史记录</text>
					<image @click="del" src="/static/seek/cc.png" class="image"></image>
				</view>
				<view class="text-container">
					<text v-for="(iten,index) in lists" :key="index" @click="clikhistory(iten.history)"
						class="view_ss">{{iten.history}}</text>
				</view>
			</view>
		</div>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const lists = ref([{
			history: '吊毛'
		},
		{
			history: '谭善'
		}
	])
</script>

<style>
	.text-container {
		display: flex;
		flex-wrap: wrap;
		/* 允许容器内的子元素换行 */
		padding: 0px 5px;
	}

	.view_ss {
		font-size: 13px;
		margin-right: 15px;
		background-color: gainsboro;
		padding: 1px 8px;
		border-radius: 10px;
		white-space: nowrap;
		/* 防止文本在内部换行 */
		margin-top: 8px;
		color: #303133;
	}

	.title {
		font-size: 20px;
		color: #333;
		font-weight: bold;
	}

	.image {
		position: relative;
		left: 200px;
		margin-left: 10px;
		width: 20px;
		height: 20px;
	}

	.line {
		height: 1px;
		/* 横线的高度 */
		background-color: #e0e0e0;
		/* 横线的颜色 */
		margin: 20px 0;
		/* 横线与上下内容的间距 */
	}

	.flex-container {
		display: flex;
		align-items: center;
		margin-top: 10px;
	}
</style>